<template>
  <div class="mapLayerChange">
    <van-checkbox-group v-model="checkedValues" @change="handleCheckboxChange">
      <van-cell-group>
        <van-cell
          v-for="(item, index) in list"
          :key="item.value"
          clickable
          :title="item.label"
          @click="toggle(index)"
        >
          <template #right-icon>
            <van-checkbox ref="checkboxes" :name="item.value" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>
  </div>
</template>
<script>

import { useResolveMappingConflict } from '@/hooks'

export default {
  id: 'mapLayerChange',
  props: {},
  data() {
    return {
      checkedValues: ['rivers'], // 存储当前选中的值
      list: [
        { label: '河流', value: 'rivers' },
        { label: '遥感', value: 'remoteSensing' },
        { label: '地形图', value: 'topographicMap' }
      ]
    }
  },
  computed: {
    isRemoteSensingDisabled() {
      return this.checkedValues.includes('topographicMap')
    },
    isTopographicMapDisabled() {
      return this.checkedValues.includes('remoteSensing')
    }
  },
  watch: {},
  created() {
  },
  methods: {
    toggle(index) {
      this.$refs.checkboxes[index].toggle()
    },
    /**
     * 图层功能状态值改变
     * @param payload
     */
    handleCheckboxChange(payload) {
      let targetSelect
      payload.includes('remoteSensing') && payload.includes('topographicMap') ? targetSelect = useResolveMappingConflict(payload) : targetSelect = payload
      this.checkedValues = targetSelect
      this.$emit('selectLayers', { show: false, data: targetSelect })
    }
  }
}
</script>
<style lang="scss" scoped>
.mapLayerChange {
  max-height: 500px;
  min-height: 200px;
  padding: 10px;
  overflow: auto;
}
</style>
